<template>
	<view class="">
		<u-navbar title="订单详情" @leftClick="leftClick" :autoback="true"></u-navbar>
		<view class="flex-col page">
		  <view class="flex-col space-y-19 group_3">
		    <view class="flex-col space-y-12 section_3">
		      <view>
		        <text class="font_2">{{infos.patentName}}</text>
		      </view>
		      <view class="flex-row space-x-21">
		        <view class="flex-col items-center text-wrapper"><text class="font_3 text_5">{{['发明','实用','外观'][infos.patentType] || '发明'}}</text></view>
		        <view class="flex-col items-center text-wrapper_2"><text class="font_3 text_6">{{getUnMoney(infos.cooperateFund,infos.paidFund)>0?'未结清':'已结清'}}</text></view>
		      </view>
		    </view>
		    <view class="flex-col space-y-26 section_4">
		      <view class="flex-row">
		        <text class="font_4">专利号：</text>
		        <text class="font_5 text_7">{{infos.patentNo || '-'}}</text>
		      </view>
		      <view class="flex-row">
		        <text class="font_4">订单编号：</text>
		        <text class="font_6 text_8">{{infos.orderNo}}</text>
		      </view>
		      <view class="flex-row">
		        <text class="font_4">合同编号：</text>
		        <text class="font_5 text_9">{{infos.contractNo || '-'}}</text>
		      </view>
		      <view class="flex-col items-start group_4">
		        <text class="font_4">案件状态：</text>
		        <text class="font_7 text_10">{{infos.caseStatus || '-'}}</text>
		      </view>
		      <view class="flex-row">
		        <text class="font_4">合作款项：</text>
		        <text class="font_7 text_11">{{infos.cooperateFund || '0.00'}}</text>
		      </view>
		      <view class="flex-row">
		        <text class="font_4">已付金额：</text>
		        <text class="font_6 text_12">{{infos.paidFund || '0.00'}}</text>
		      </view>
		      <view class="flex-row">
		        <text class="font_4">未付金额：</text>
		        <text class="font_7 text_13">{{getUnMoney(infos.cooperateFund,infos.paidFund)}}</text>
		      </view>
		    </view>
		    <!-- <view class="flex-col section_5">
		      <view class="flex-row justify-center space-x-12">
		        <view class="flex-row space-x-10 equal-division-item">
		          <image
		            class="image_7"
		            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16648045879431115285.png"
		          />
		          <text class="font_8 text_14">订单开始</text>
		        </view>
		        <view class="flex-row equal-division-item_2">
		          <image
		            class="image_8"
		            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16648045878479874599.png"
		          />
		          <view class="flex-col items-center text-wrapper_3"><text class="font_9 text_17">2</text></view>
		          <text class="font_8 text_15">申请提交</text>
		        </view>
		        <view class="flex-row equal-division-item_2">
		          <image
		            class="image_9"
		            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16648045879044302497.png"
		          />
		          <view class="flex-col items-center text-wrapper_4"><text class="font_9 text_18">3</text></view>
		          <text class="font_8 text_16">已授权</text>
		        </view>
		      </view>
		    </view> -->
			<view class="jindutiao">
				
				<u-steps :current="isApplySubmit" activeColor="#67c23a">
					<u-steps-item title="订单开始" >
					</u-steps-item>
					<u-steps-item title="专利申请" ></u-steps-item>
					<u-steps-item title="已授权" ></u-steps-item>
				</u-steps>
			</view>
		    <view class="flex-col section_6">
		      <view class="flex-row justify-between group_5">
		        <view class="group_6">
		          <text class="font_10 text_19">评价</text>
		          <text class="font_10 text_20">（{{evaluations.length}}）</text>
		        </view>
		        <view @click="openEvaluation(infos.orderNo)" class="flex-col items-center text-wrapper_5"><text class="font_4 text_21">{{!evaluations.length ? '评价' : '追加评价'}}</text></view>
		      </view>
		      <view class="divider"></view>
		      <view class="flex-col group_7" v-for="(item,index) in evaluations" :key="index">
		        <text class="font_11 text_22">{{item.createTime}}</text>
		        <view class="flex-row group_8">
		          <text class="font_8">客户评分：</text>
		          <u-rate activeColor="#ff9702" :count="count" v-model="item.score" :allowHalf="true"></u-rate>
		          <text class="font_12 text_23">{{item.score}}分</text>
		        </view>
		        <view class="flex-col text-wrapper_6">
		          <text class="font_13 text_24">
		            {{item.content || '暂无评价'}}
		          </text>
		        </view>
		      </view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	import {getEvaluate} from '@/api/index.js';
	import {getOrderDetails} from '@/api/index.js';
	export default {
		data() {
			return {
				evaluations:[],
				count:5,
				evaluation:1,
				active:'',
				infos:{},
				id:'',
				isApplySubmit:'0',
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.getDetails();
		},
		methods:{
			getDetails() {
				getEvaluate({orderNo:this.infos.orderNo,pageSize:1000,pageNo:1}).then(res => {
					if(res.code === 200) {
						this.evaluations = res.data.list;
					}
				});
				getOrderDetails({id:this.id}).then(res => {
					if(res.code === 200) {
						this.infos = res.data;
						if(this.infos.patentNo) this.isApplySubmit = '1';
						if(!this.infos.patentNo) this.isApplySubmit = '0';
						if(['4','5'].includes(this.infos.level)) this.isApplySubmit = '3';
						if(this.infos.code == '40120') this.isApplySubmit = '2';
					}
				});
			},
			leftClick(){
				if (getCurrentPages().length > 1) {
					uni.navigateBack();
				} else {
					uni.switchTab({
						url: '../../pages/index/index'
					})
				}
			},
			openEvaluation(orderNo){
				uni.navigateTo({
					url:`../order/evaluation?orderNo=${orderNo}`
				})
			},
			getUnMoney(coop,pay){
				return parseFloat(coop || 0) - parseFloat(pay || 0);
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
  background-color: #f4f6f8;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  .space-y-19 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-top: 19rpx;
    }
    .space-y-12 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 12rpx;
      }
      .font_2 {
        font-size: 30rpx;
        font-family: Microsoft YaHei;
        line-height: 44rpx;
        color: #333333;
      }
      .space-x-21 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 21rpx;
        }
        .text-wrapper {
          padding: 2rpx 0 4rpx;
          background-color: #ffffff;
          border-radius: 4rpx;
          width: 70rpx;
          height: 26rpx;
          border: solid 1rpx #2f87f2;
          .text_5 {
            color: #2f87f2;
            line-height: 18rpx;
          }
        }
        .text-wrapper_2 {
          padding: 4rpx 0 3rpx;
          background-color: #fef9f2;
          border-radius: 13rpx;
          width: 100rpx;
          height: 26rpx;
          .text_6 {
            color: #ec8e00;
            line-height: 19rpx;
          }
        }
        .font_3 {
          font-size: 19rpx;
          font-family: Microsoft YaHei;
        }
      }
    }
    .section_3 {
      padding: 23rpx 29rpx 32rpx;
      background-color: #ffffff;
    }
    .space-y-26 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 26rpx;
      }
      .font_5 {
        font-size: 26rpx;
        font-family: Microsoft YaHei;
        line-height: 21rpx;
        color: #5372fc;
      }
      .text_7 {
        margin-top: 3rpx;
      }
      .font_6 {
        font-size: 26rpx;
        font-family: Microsoft YaHei;
        line-height: 21rpx;
        color: #444444;
      }
      .text_8 {
        margin-top: 3rpx;
      }
      .text_9 {
        margin-top: 3rpx;
      }
      .group_4 {
        position: relative;
        .text_10 {
          line-height: 3rpx;
          position: absolute;
          left: 124rpx;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .font_7 {
        font-size: 26rpx;
        font-family: Microsoft YaHei;
        line-height: 24rpx;
        color: #444444;
      }
      .text_11 {
        margin-top: 3rpx;
      }
      .text_12 {
        margin-top: 3rpx;
      }
      .text_13 {
        margin-top: 3rpx;
      }
    }
    .section_4 {
      padding: 29rpx 30rpx 32rpx;
      background-color: #ffffff;
    }
    .section_5 {
      padding: 24rpx 0;
      background-color: #ffffff;
      .space-x-12 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 12rpx;
        }
        .space-x-10 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 10rpx;
          }
          .image_7 {
            flex-shrink: 0;
            width: 30rpx;
            height: 30rpx;
          }
          .text_14 {
            color: #37c967;
          }
        }
        .equal-division-item {
          padding: 11rpx 0;
        }
        .equal-division-item_2 {
          padding: 10rpx 0;
          .image_8 {
            flex-shrink: 0;
            align-self: center;
            width: 82rpx;
            height: 11rpx;
          }
          .text-wrapper_3 {
            margin-left: 14rpx;
            padding: 8rpx 0 9rpx;
            flex-shrink: 0;
            background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16648045879932955837.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 32rpx;
            height: 32rpx;
            .text_17 {
              color: #333333;
            }
          }
          .text_15 {
            margin-left: 8rpx;
            color: #333333;
          }
          .image_9 {
            margin: 10rpx 0;
            flex-shrink: 0;
            width: 82rpx;
            height: 12rpx;
          }
          .text-wrapper_4 {
            margin-left: 15rpx;
            padding: 9rpx 0 8rpx;
            flex-shrink: 0;
            background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16648045880285611076.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 32rpx;
            height: 32rpx;
            .text_18 {
              color: #999999;
            }
          }
          .font_9 {
            font-size: 20rpx;
            font-family: Microsoft YaHei;
            line-height: 15rpx;
          }
          .text_16 {
            margin-left: 9rpx;
            color: #999999;
          }
        }
      }
    }
    .section_6 {
      background-color: #ffffff;
      .group_5 {
        padding: 18rpx 30rpx 10rpx 31rpx;
        .group_6 {
          align-self: center;
          line-height: 32rpx;
          height: 34rpx;
          .font_10 {
            font-size: 34rpx;
            font-family: Microsoft YaHei;
            line-height: 32rpx;
          }
          .text_19 {
            color: #333333;
          }
          .text_20 {
            color: #999999;
          }
        }
        .text-wrapper_5 {
          padding: 17rpx 0;
          background-color: #5372fc;
          border-radius: 4rpx;
          width: 180rpx;
          height: 60rpx;
          .text_21 {
            color: #ffffff;
          }
        }
      }
      .divider {
        margin: 0 20rpx;
        background-color: #f1f1f1;
        height: 2rpx;
      }
      .group_7 {
        padding: 39rpx 38rpx 53rpx 39rpx;
        .font_11 {
          font-size: 28rpx;
          font-family: Microsoft YaHei;
          line-height: 23rpx;
          color: #333333;
        }
        .text_22 {
          align-self: flex-start;
        }
        .group_8 {
          margin-top: 17rpx;
          .text_23 {
            margin-left: 18rpx;
          }
        }
        .text-wrapper_6 {
          margin-left: 3rpx;
          margin-top: 21rpx;
          padding: 13rpx 0 24rpx;
          background-color: #fafafa;
          .text_24 {
            margin-left: 22rpx;
            margin-right: 5rpx;
          }
        }
        .text_25 {
          margin-top: 43rpx;
          align-self: flex-start;
        }
        .group_9 {
          margin-top: 17rpx;
          .text_26 {
            margin-left: 15rpx;
          }
        }
        .image_10 {
          width: 199rpx;
          height: 29rpx;
        }
        .font_12 {
          font-size: 28rpx;
          font-family: Microsoft YaHei;
          line-height: 28rpx;
          color: #ff9702;
        }
        .text-wrapper_7 {
          margin-left: 3rpx;
          margin-top: 21rpx;
          padding: 13rpx 0 23rpx;
          background-color: #fafafa;
          .text_27 {
            margin-left: 22rpx;
            margin-right: 6rpx;
          }
        }
        .font_13 {
          font-size: 28rpx;
          font-family: Microsoft YaHei;
          line-height: 44rpx;
          color: #444444;
        }
      }
    }
    .font_4 {
      font-size: 26rpx;
      font-family: Microsoft YaHei;
      line-height: 26rpx;
      color: #777777;
    }
    .font_8 {
      font-size: 28rpx;
      font-family: Microsoft YaHei;
      line-height: 28rpx;
      color: #777777;
    }
  }
  .group_3 {
    padding-bottom: 46rpx;
    flex: 1 1 auto;
    overflow-y: auto;
  }
}

.jindutiao{
	background-color: #fff;
	padding: 20rpx 0;
}
</style>